<template>
    <el-drawer
      title="分配人员"
      :visible.sync="drawer"
      size="40%"
      :append-to-body='true'>

      <el-tabs v-model="activeName" style="padding-left: 20px;padding-right: 20px;" @tab-click="handleClick" >
        <el-tab-pane label="查看" name="first">
          <div>
            <el-table :data="tableData" :header-cell-style="{background:'#f0f0f0'}"style="width: 100%">
              <el-table-column  type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="name"
                label="姓名"
                width="100">
              </el-table-column>
              <el-table-column
                prop="empId"
                label="工号"
                width="100">
              </el-table-column>
              <el-table-column
                prop="departmentName"
                label="部门">
              </el-table-column>
              <el-table-column label="操作" >
                <template slot-scope="scope">
                   <el-button size="small" type="text" @click="deleteUser(scope.row.empId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--抽屉分页-->
            <div style=" background-color: #ffffff;padding: 20px 10px;">
              <el-pagination
                @size-change="handleDefSizeChange"
                @current-change="handleDefCurrentChange"
                :current-page="queryData.pageNumber"
                :page-sizes="[10,50,100,200]"
                :page-size="queryData.pageSize"
                layout=" total,sizes,->,jumper, prev, pager, next"
                :total="totalSize">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="新增" name="second"  >
          <el-form ref="queryForm" label-width="50px" label-position="left" :model="queryData" :inline="true" style="white-space: nowrap;">
            <el-row>
              <el-form-item  label="部门" prop="departmentId" >
                <el-cascader  :options="treeData" :props="cascadeProps"  :show-all-levels="false"v-model="queryUserData.departmentId" clearable  ref="cascader"  style="width: 200px"></el-cascader>
              </el-form-item>
              <el-form-item label="姓名" prop="categoryName">
                <el-input v-model.trim="queryData.categoryName" placeholder="请输入字典项" show-word-limit  style="width: 200px" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="工号" prop="categoryName">
                <el-input v-model.trim="queryData.categoryName" placeholder="请输入字典项" show-word-limit  style="width: 200px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="selectUserByDepartmentId">查询</el-button>
                <el-button  size="small"  @click="resetFields('queryForm')">重置</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <el-table :data="userData" max-height="400px" :header-cell-style="{background:'#f0f0f0'}"style="width: 100%;"  @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              :selectable="checkSelectable"
              width="50">
            </el-table-column>
            <el-table-column  type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column  label="姓名" width="100">
              <template slot-scope="scope">{{scope.row.name}}</template>
            </el-table-column>
            <el-table-column  label="工号" width="100">
              <template slot-scope="scope">{{scope.row.empId}}</template>
            </el-table-column>
            <el-table-column label="部门">
              <template slot-scope="scope">{{scope.row.departmentName}}</template>
            </el-table-column>
          </el-table>
          <!--抽屉分页-->
          <div style=" background-color: #ffffff;padding: 20px 10px;">
            <el-pagination
              @size-change="handleDefSizeChange"
              @current-change="handleDefCurrentChange"
              :current-page="queryData.pageNumber"
              :page-sizes="[10,50,100,200]"
              :page-size="queryData.pageSize"
              layout=" total,sizes,->,jumper, prev, pager, next"
              :total="totalSize">
            </el-pagination>
          </div>
          <div>
            <el-row>
              <el-col :span="2">已选：</el-col>
              <el-col :span="22">
                <el-tag
                  :key="tag"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
              </el-col>
            </el-row>
          </div>
          <div style="width:200px;margin:  auto;padding-top: 40px">
            <el-button size="small"  style="float:left"  @click="">取消</el-button>
            <el-button size="small" type="primary" style="float:right" @click="addUserToRole">保存</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
</template>

<script>
  export default {
    data() {
      return {
        dynamicTags: [],
        activeName: 'first',
        drawer: false,
        treeData:[],
        userData:[],
        cascadeProps:{
          value: "departmentId",
          label: "name",
          children: "children",
          emitPath:false,
          checkStrictly: true
        },
        queryData:{
          departmentRoleId:'',
          pageNumber:1,
          pageSize:10
        },
        queryUserData:{
          departmentId:'',
          name:'',
          empId:'',
          pageNumber:1,
          pageSize:10
        },
        multipleSelection: [],
        totalSize:0,
        tableData: [],
        saveData:{
          empId:'',
          departmentRoleId:''
        },
      };
    },
    methods:{
      addUserToRole(){
        let param={departmentRoleId:this.queryData.departmentRoleId,empIds:this.multipleSelection.map(item=>item.empId)}
        this.$api.permission.addUserToRole(param).then(resp => {
          this.selectUserByDepartmentId()
          this.dataList()
        })
      },
      checkSelectable(row){
        let empIds=this.tableData.map(item => item.empId)
        return !empIds.includes(row.empId)
      },
      deleteUser(empId){
        this.$api.permission.deleteUserRole({departmentRoleId:this.queryData.departmentRoleId,empId:empId}).then(resp => {
          this.dataList()
          this.$message.success("删除成功")
        })
      },
      //树
      departmentTree(){
        this.$api.department.tree().then(resp => {
          this.treeData=resp;
        })
      },
      //人员搜索
      selectUserByDepartmentId(){
        this.$api.user.selectUserByDepartmentId(this.queryUserData).then(resp => {
          this.userData=resp.data
          this.totalSize=resp.totalSize;
        })
      },
      handleClick(tab, event) {
         if(this.activeName=='second'){
           this.selectUserByDepartmentId();
         }else {
           this. dataList();
         }
      },
      //列表
      dataList(){
        this.$api.permission.getUserByRole( this.queryData ).then(resp => {
          this.tableData =resp.data;
          this.totalSize=resp.totalSize;
          // 完成赋值后，把加载状态赋值为false
        })
      },
      //分页
      handleDefSizeChange(val) {
        this.queryData.pageSize=val;
        this.dataList();
      },
      handleDefCurrentChange(val) {
        this.queryData.pageNumber=val;
        this.dataList();
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
        this.dynamicTags = val.map(item => item.name+'（'+item.empId+'）')
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
    },
    mounted() { // 渲染后执行
      // 查询数据
      this.$bus.$on('openAddUser',(data)=>{
        this.queryData.departmentRoleId=data.departmentRoleId
        this.departmentTree();
        this. dataList();
        this.drawer=true;
      })


    },
    beforeDestroy() {
      this.$bus.$off('openAddUser')
    },
  };
</script>

<style type="less" scoped >
  .example {}
  .el-tag {
    margin-left: 10px;
  }

</style>
